<!DOCTYPE html >
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>汇才商城，欢迎登录</title>
    <link rel="icon" href="../img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="../css/all.css"/>
    <link rel="stylesheet" type="text/css" href="../css/pages-login.css"/>

	<script src="../js/vue.js"></script>
	<script src="../js/axios.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>

    <style>
        .loginMessage {
            display: block;
            width: 100%;
            text-align: center;
            color: red;
            font-size: 15px;
            /*margin-left: 60px;*/
            margin-bottom: 10px;
            /*background-color: #38d616;*/
        }
    </style>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">汇才商城欢迎您！</li>
                        <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html"
                                                                                                 target="_blank">免费注册</a></span></li>
                    </ul>
                    <div class="fr typelist">
                        <ul class="types">
                            <li class="f-item">
                                <span>
                                    <a href="myOrder.html" target="_blank">我的订单</a>
                                </span>
                            </li>
                            <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                            <li class="f-item"><span><a href="home.html" target="_blank">我的汇才</a></span></li>
                            <li class="f-item"><span>汇才会员</span></li>
                            <li class="f-item"><span>企业采购</span></li>
                            <li class="f-item"><span>关注汇才</span></li>
                            <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                            <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="汇才商城" href="index.html"></a>
                    </div>
                    <div class="yui3-u Rit searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input type="text" id="autocomplete" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div class="login-box" id="login_box">
    <!--loginArea-->
    <div class="loginArea">
        <div class="py-container login">
            <div class="loginform">
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li id="tabOtherLogin" onclick="switchOtherLogin()">
                        <a href="javascript:void(0)" data-toggle="tab">
                            <h3>扫描登录</h3>
                        </a>
                    </li>
                    <li id="tabSuiForm" class="active" onclick="switchSuiForm()">
                        <a href="javascript:void(0)" data-toggle="tab">
                            <h3>账户登录</h3>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane ">
                        <p>二维码登录，暂为官网二维码</p>
                        <img src="../img/wx_cz.jpg"/>
                    </div>
                    <div id="profile" class="tab-pane active">
                        <form class="sui-form">
                            <label class="loginMessage" id="userMessage">&nbsp;<!--请输入用户名--></label>

                            <div class="input-prepend"><span class="add-on loginname"></span>
                                <input id="inputName" type="text" placeholder="邮箱/用户名/手机号" class="span2 input-xfat">
                            </div>
                            <br/>
                            <label class="loginMessage" id="pwdMessage">&nbsp;</label>
                            <div class="input-prepend"><span class="add-on loginpwd"></span>
                                <input id="inputPassword" type="password" placeholder="请输入密码" class="span2 input-xfat">
                            </div>
                            <div class="setting">
                                <label class="checkbox inline">
                                    <input name="autoLogin" id="autoLogin" type="checkbox" value="2" checked="">
                                    自动登录
                                </label>
                                <span class="forget">忘记密码？</span>
                            </div>
                        </form>
                        <div class="logined">
                            <a class="sui-btn btn-block btn-xlarge btn-danger" onclick="userLogin()" href="javascript:;"
                               target="">登&nbsp;&nbsp;
                                录</a>
                        </div>
                        <div class="otherlogin">
                            <div class="types">
                                <ul>
                                    <li><img src="../img/qq.png" width="35px" height="35px"/></li>
                                    <li><img src="../img/sina.png"/></li>
                                    <li><img src="../img/ali.png"/></li>
                                    <li><img src="../img/weixin.png"/></li>
                                </ul>
                            </div>
                            <span class="register"><a href="register.html" target="_self">立即注册</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机汇才</li>
            <li>销售联盟</li>
            <li>汇才社区</li>
        </ul>
        <div class="address">© 2020 版权所有 广州汇才创智科技有限公司</div>
        <div class="beian">粤ICP备20043971号
        </div>
    </div>
</div>

<script type="text/javascript">
    function switchSuiForm() {
        document.getElementById('index').className = "tab-pane";
        document.getElementById('profile').className = "tab-pane active";
        document.getElementById('tabSuiForm').className = "active";
        document.getElementById('tabOtherLogin').className = "";
    }

    function switchOtherLogin() {
        document.getElementById('index').className = "tab-pane active";
        document.getElementById('profile').className = "tab-pane";
        document.getElementById('tabSuiForm').className = "";
        document.getElementById('tabOtherLogin').className = "active";
    }

    function userLogin() {
        $("#userMessage").html(" ");
        // $("#pwdMessage").html("");
        let $userName=$("#inputName").val();
        let $userPassword=$("#inputPassword").val();
        let $autoLogin=$("#autoLogin").is(":checked");
        let userData={"userName":$userName,"userPassword":$userPassword,"autoLogin":$autoLogin}
        $.ajax({
            url: "/SpringBoot/user/userLogin",
            type: "post",
            dataType: "json",
            data: userData,
            success: function (data) {
                console.log(data);
                if(data.code==1){
                    window.open("index","_self");
                }else if(data.code==0){
                    $("#userMessage").html(data.message);
                }else if(data.code==2){
                    $("#pwdMessage").html(data.message);
                }
            },
            error: function () {
                $("#message").html("数据获取失败");
            }
        })
    }
</script>
</body>
</html>
